<template>
  <view>
    <customtop top_title="公司信息"></customtop>
    <view class="container" v-if="!loading">
      <view v-if="user.company_auth == 1">
        <form class="luckform" @submit="formSubmit">
          <view class="items">
            <view class="item weui-cell">
              <view class="weui-cell__hd">
                <view class="weui-label">公司全称</view>
              </view>
              <view class="weui-cell__bd">
                <input class="weui-input" type="text" disabled="true" placeholder="请输入公司简称" :value="company.name" />
              </view>
            </view>
            <view class="item weui-cell">
              <view class="weui-cell__hd">
                <view class="weui-label">公司简称<span class="span_required">*</span></view>
              </view>
              <view class="weui-cell__bd">
                <input name="shortname" class="weui-input" type="text" placeholder="请输入公司简称" :value="company.shortname" />
              </view>
            </view>
            <view class="item weui-cell weui-cell_active weui-cell_access weui-cell_select weui-cell_select-after">
              <view class="weui-cell__hd">
                <view class="weui-label">所属行业<span class="span_required">*</span></view>
              </view>
              <view class="weui-cell__bd" @click="onPickerShow_industry">
                {{industry ? industry : '请选择'}}
                <input hidden="true" name="industry" :value="industry" />
              </view>
            </view>
          </view>

          <view class="items">
            <view class="top">
              <span class="title">公司LOGO</span><span class="span_remark">建议方形尺寸，500X500</span>
            </view>
            <view class="weui-cell">
              <view class="weui-cell__bd">
                <view>
                  <u-upload
                    :fileList="fileList_logo"
                    @afterRead="afterRead_images"
                    @delete="delete_images"
                    multiple
                    name="logo"
                    :maxCount="1"
                  />
                </view>
              </view>
            </view>
          </view>

          <view class="items">
            <view class="top">
              <span class="title">公司简介</span>
            </view>
            <view class="item weui-cell">
              <view class="weui-cell__bd">
                <textarea maxlength="-1" name="introduction" class="weui-textarea" placeholder="请输入公司简介" :value="company.introduction"></textarea>
              </view>
            </view>
          </view>

          <view class="btnbox">
            <button class="luckbtn luckbtn-default" formType="submit">提交信息</button>
          </view>
        </form>
        <u-picker
          :show="pickerShow_industry"
          :columns="pickerColumns_industry"
          keyName="label"
          @confirm="onPickerConfirm_industry"
          @close="onPickerClose_industry"
          @cancel="onPickerClose_industry"
          :closeOnClickOverlay="true"
        >
        </u-picker>
      </view>

      <view v-if="user.company_auth == 0">
        <view class="noauth">
          <view class="msg">需先公司认证</view>
          <view class="msg msg1">认证简单快捷，成功认证信誉度更高</view>
          <button class="luckbtn luckbtn-default" @click="jumpPage('/pages/account/auth_company');">公司认证</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request, upload } from "@/utils/http.js"
import customtop from "@/components/customtop.vue"

export default {
  components: { customtop },

  data() {
    return {
      loading: true,
      user: {},
      company: {},
      industry: '',
      pickerColumns_industry: [],
      pickerShow_industry: false,
      fileList_logo: [],
      logo: '',
    }
  },

  onLoad: function() {
    uni.showLoading();
    request.post('/common/getConfig').then(res => {
      this.pickerColumns_industry = [res.data.company.industrys];
    })
    this.getLoginUser();
    this.getCompany_edit();
  },

  methods: {
    getLoginUser: function() {
      request.post('/user/getLoginUser').then(res => {
        this.loading = false;
        uni.hideLoading();
        this.user = res.data;
      })
    },

    getCompany_edit: function() {
      request.post('/company/getCompany_edit').then(res => {
        if (res.data != null) {
          this.company = res.data;
          this.industry = res.data.industry;
          if (res.data.logo != '') {
            var file = { thumb: res.data.logo, type: "image", url: res.data.logo };
            this.logo = res.data.logo;
            this.fileList_logo = [file];
          }
        }
      })
    },

    onPickerShow_industry: function() {
      this.pickerShow_industry = true;
    },

    onPickerClose_industry: function() {
      this.pickerShow_industry = false;
    },

    onPickerConfirm_industry: function(e) {
      this.industry = e.value[0];
      this.pickerShow_industry = false;
    },

    formSubmit: function(e) {
      uni.showLoading();
      let that = this;
      let params = e.detail.value;
      params.industry = this.industry;
      params.logo = this.logo;
      request.post('/company/update', params).then(res => {
        uni.hideLoading();
        if (res.code == 200) {
          uni.showToast({
            icon: 'none',
            title: '信息已更新',
          })
        } else if (res.code == 400) {
          uni.showToast({ title: res.message, icon: 'none' });
        }
      })
    },

    afterRead_images: function(event) {
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList_${event.name}`].length;
      lists.map((item) => {
        this[`fileList_${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })

      for (let i = 0; i < lists.length; i++) {
        upload(lists[i].url).then(res => {
          let item = this[`fileList_${event.name}`][fileListLen];
          this[`fileList_${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            id: 0,
            url: res.data.url
          }))
          this[`${event.name}`] = res.data.url
          fileListLen++
        });
      }
    },

    delete_images: function(event) {
      this[`fileList_${event.name}`].splice(event.index, 1);
      this[`${event.name}`] = '';
    },

    switchTab: function(url) {
      uni.switchTab({ url: url });
    },

    jumpPage: function(url) {
      uni.navigateTo({ url: url });
    }
  }
}
</script>

<style>
@import url("company.css");
page {
  padding-bottom: 50rpx;
}
.luckform .items {
  margin-top: 30rpx;
}
.luckform .btnbox {
  margin-top: 60rpx;
}
.luckform .btnbox .luckbtn {
  background-color: #3c7bfb;
}

.images {
  margin-top: 60rpx;
}
.images .img_items {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}
.images .img_item {
  width: 48%;
}
.images .img_item .image {
  width: 100%;
  height: 130px;
  line-height: 130px;
  background-color: #e7efff;
  position: relative;
}
.images .img_item .img {
  max-width: 65%;
  max-height: 80%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.images .luckbtn {
  background-color: #3c7bfb;
  height: 66rpx;
  line-height: 66rpx;
  border-radius: 0;
}

.status_box {
  margin-top: 50rpx;
}
</style>
